<template>
    <div>
        <div ref="charts" class="chart-div"></div>
    </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
import { getLine } from '@/api/list'
// 获取vue的实例对象
const instance = getCurrentInstance()
// 获取全局挂载的echarts
let echarts = instance?.appContext?.config?.globalProperties?.$echarts;
//
const charts = ref(null)
const initEchart = async () => {
    const myChart = echarts.init(charts.value)
    const res = await getLine()
    console.log(res);
    const xData = []
    const yData = []
    res.data.map(item => {
        xData.push(item.label)
        yData.push(item.value)
    })
    console.log(xData);
    console.log(yData);
    const option = {
        xAxis: {
            type: 'category',
            data: xData
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: yData,
                type: 'line'
            }
        ]
    };
    myChart.setOption(option)
}
onMounted(() => {
    initEchart()
})

</script>

<style scoped>
.chart-div {
    width: 600px;
    height: 400px;
    margin-left: 20%;
    border: solid black 1px;
}
</style>